<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: white;
        }
        .block {
            width: 3.59rem;
            height: 0.90rem;
            align-items: center;
            border-style: solid;
            border-bottom-width: 0.01rem;
            border-color: #EEEEEE;
            justify-content: space-between;
        }
        .icon {
            width: 0.50rem;
            height: 0.50rem;
            background-size: 0.50rem 0.50rem;
        }
        .product-name {
            font-size: 0.16rem;
            line-height: 0.22rem;
            margin-bottom: 0.04rem;
            color: #26344C;
        }
        .date {
            font-size: 0.14rem;
            line-height: 0.20rem;
            color: #83889A;
        }
        .time {
            font-size: 0.12rem;
            line-height: 0.17rem;
            color: #83889A;
        }
        p {
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break:break-all;
            -webkit-line-clamp: 1; /* 控制显示的行数 */
        }
    </style>
</head>
<body>
    <div id="msg-list" style="width: 100%;"></div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var msgListEl;
    apiready = function () {
        msgListEl = $api.byId('msg-list');

        getBookingList();
    }

    function getBookingList() {
        api.ajax({
            url: apiUrl + '/me/msg-list',
            tag: '/me/msg-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    var msgList = ret.data.room_msg;

                    for (var i=0,leni=msgList.length; i<leni; i++) {
                        var second = msgList[i]["create_time"];
                        second = formatTimeSecond(second);
                        $api.append(msgListEl,
                            '<div class="flex" style="width: 100%; justify-content: flex-end; height: 0.90rem;">' +
                                '<div class="flex block">' +
                                    '<div class="flex" style="height: 0.50rem; align-items: center;">' +
                                        '<div class="icon" style="background-image: url(' + msgList[i]["avatar"] + ')"></div>'+
                                        '<div style="margin-left: 0.12rem">' +
                                            '<p class="product-name">' + msgList[i]["master_name"] + '</p>' +
                                            '<p class="date">' + msgList[i]["content"] + '</p>' +
                                        '</div>'+
                                    '</div>' +
                                    '<div style="height: 0.50rem; margin-right: 0.16rem;">' +
                                        '<p class="time">' + second + '</p>' +
                                    '</div>' +
                                '</div>' +
                            '</div>');
                    }

                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }
</script>